<!doctype html>
<html>
<head>
<title>apple计算器</title>
</head>
<style>
 td{
	 color:white;
	 background-color:black;
	 border: 1px solid black;
	 font-size:20px;
	 width:100px;
	 height:70px;
	 text-align:center;
	
 }
 table{
	 border-spacing:0px;
	 width:400px;
	 height:350px;
	 margin:0 auto; 
 }
 td:hover{
	 corsur:pointer;
	 background-color:orange;
 }
 #dimgrey{
	 border-radius:15px 15px 0px 0px;
	 font-size:40px;
	 text-align:left;
 }
 #white{
	 text-align:left;

 }
 #td-yj1{
	 border-radius:0px 0px 0px 15px;
 }
 #td-yj2{
 	border-radius:0px 0px 15px 0px;
 }
 .grey{
	 background-color:grey;
 }
 .orange{
 	background-color:orange;
 }
</style>
<body>
 <table> 
   <tr>
    <td colspan="4" id="dimgrey" >
   </tr>
   <tr>
    <td colspan="4" id="white"></td> 
   </tr>
   <tr > 
    <td class="grey">AC</td> 
    <td class="grey">+/-</td>    
    <td class="grey">%</td>
    <td class="orange">/</td>
   </tr>
   <tr > 
    <td>7</td> 
    <td>8</td>    
    <td>9</td>
    <td class="orange">*</td>
   </tr>
   <tr >
    <td>4</td> 
    <td>5</td>    
    <td>6</td>
    <td class="orange">-</td>
   </tr>
   <tr >
    <td>1</td> 
    <td>2</td>    
    <td>3</td>
    <td class="orange">+</td>
   </tr>
   <tr >
    <td id="td-yj1">0</td> 
    <td>删除</td>    
    <td>.</td>
    <td id="td-yj2" class="orange">=</td>
   </tr>
 </table>
</body>
</html>